<template>
  <a-modal class="position_type_modal" :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel" width="840px">
    <div class="select_total clearfix">
      <span class="label fl">已选择</span>
      <div class="badge_wrapper">
        <a class="badge" v-for="item in selectList" :key="item.name" @click="removeSelect(item)">{{ item.name }}</a>
      </div>
    </div>
    <div class="tab_wrapper">
      <a class="tab_item border" v-for="(item, index) in activeStage" :key="index + item.name" :class="{ active: index === activeStage.length - 1 }" @click="changeStage(item)">{{ item.name }}</a>
    </div>
    <div class="option_wrapper border">
      <a-row>
        <a-col v-for="(item, index) in displayList" :key="item.id + item.name" :span="6" class="option">
          <a-checkbox v-show="item.children" v-model="item.checkAll" @change="checkAll($event, item, index)"></a-checkbox>
          <a class="option_inner" :title="item.name" :class="{ active: item.isCheck }" @click="rootSelect($event, item, index)">{{ item.name }}</a>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>
<script>
import { getCityCitys } from '@/api/createjobs.js'
export default {
  props: ['title', 'visible'],
  data () {
    return {
      displayList: [],
      selectList: [],
      activeStage: [
        { name: '全部', stage: 0 }
      ],
      cascaderData: [],
      provincvinceId: '',
      provincvinceName: '',
      cityId: '',
      cityName: ''
    }
  },
  watch: {
    visible: {
      handler: function (newValue) {
        if (newValue === true) {
          this.getCityData()
        }
      }
    }
  },
  methods: {
    getCityData () {
      getCityCitys().then(res => {
        this.cascaderData = res.data
        this.displayList = this.cascaderData
      })
    },
    rootSelect (e, selectedEle, index) {
      // 如果有子字段
      if (selectedEle.children) {
        this.activeStage.push({ name: selectedEle.name, stage: index })
        this.displayList = selectedEle.children
        this.provincvinceId = selectedEle.id
        this.provincvinceName = selectedEle.name
      } else {
        this.$set(this.displayList[index], 'isCheck', !this.displayList[index].isCheck)
        this.cityId = selectedEle.id
        this.cityName = selectedEle.name
        if (this.displayList[index].isCheck) {
          this.selectList.push({ name: this.displayList[index].name, id: this.displayList[index].id })
        } else {
          this.selectList.splice(this.selectList.findIndex(item => item.id === selectedEle.id), 1)
        }
      }
    },
    // badge点击 删除
    removeSelect (ele) {
      this.removeCheck(this.cascaderData, ele.id)
      this.selectList.splice(this.selectList.findIndex(item => item.id === ele.id), 1)
    },
    changeStage (ele) {
      if (ele.name === this.activeStage[this.activeStage.length - 1].name) {
        return
      }
      if (ele.stage === 0) {
        this.displayList = this.cascaderData
        this.activeStage = [this.activeStage[0]]
      }
      console.log(this.activeStage)
    },
    // 移除check
    removeCheck (list, id) {
      list.forEach((item) => {
        if (item.children && item.children.length) {
          this.removeCheck(item.children, id)
        } else {
          if (item.id === id) {
            item.isCheck = false
          }
        }
      })
    },
    checkAll (e, ele) {
      if (e.target.checked) {
        this.selectList.push(ele)
      } else {
        this.selectList.splice(this.selectList.findIndex(item => item.id === ele.id), 1)
      }
    },
    handleOk () {
      this.$emit('CityModalData', this.provincvinceId, this.provincvinceName, this.cityId, this.cityName, this.selectList)
      this.selectList = []
      this.activeStage = [{ name: '全部', stage: 0 }]
      this.provincvinceId = []
      this.provincvinceName = []
      this.cityId = []
      this.cityName = []
    },
    handleCancel () {
      this.$emit('close')
      this.selectList = []
      this.activeStage = [{ name: '全部', stage: 0 }]
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/styles/var'
.position_type_modal
  max-height: 500px
  .select_total
    .label
      display inline-block
      vertical-align middle
      line-height 34px
    .badge_wrapper
      margin-left 60px
      padding 4px 0
      .badge
        display inline-block
        margin 0 4px 2px 0
        padding 0 8px
        line-height 26px
        background-color BGblue
        color #fff
        border-radius 13px
  .tab_wrapper
    .tab_item:first-child
      left 0
    .tab_item
      position relative
      top 1px
      left -1px
      z-index 10
      display inline-block
      padding 8px 15px
      background-color #fff
    .tab_item.active
      border-bottom-color #fff
  .option_wrapper
    padding 24px
    .title
      height 22px
      line-height 22px
      font-weight bold
    .option
      height 30px
      padding 0 2px
      line-height 30px
      margin-bottom 4px
      color var(--blue-500)
      .option_inner.active
        background-color BGblue
        color #fff
      .option_inner
        display inline-block
        vertical-align top
        max-width 89%
        padding 0 4px
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
</style>
<style lang="stylus">
.position_type_modal
  .ant-modal-body
    padding-top 0
    max-height: 700px
    overflow-y: scroll
</style>
